import React, { useState ,useEffect} from 'react';
import { Table, Radio, Divider } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { setPage } from '../../store/customerStore/action';
import style from './index.module.scss'
// import './Table.scss'

// rowSelection object indicates the need for row selection


export const Demo = (columns = [], data = [], NewPage = {}) => {
  // columns 为表头
  // data 为要渲染的数据
  // NewPage 为设定的参数,对象，
  //  接收 total(必需，总数据条数)、
  //    type(true为有多选框，默认为没框)、
  //    state(true为隐藏只有一页时的分页,默认为隐藏)
  const pageState = NewPage.state || false;
  const type = NewPage.type || false;
  const dispatch = useDispatch()

  const onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    // 获取列表数据
    dispatch(setPage(current,pageSize))
  }

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        //selectedRowKeys 为选中了哪几个
        //selectedRows 为选中的数据内容
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      getCheckboxProps: (record) => ({
        // disabled: record.name === 'Disabled User',
        // Column configuration not to be checked
        name: record.name
      }),
    };



    //   const [selectionType, setSelectionType] = useState('checkbox');
    return (
      <div className={style.Table}>
        <Table
          //  className={style.Table}
          rowClassName={style.Table}
          // { true ? '' :''}
          rowSelection={type ? {
            type: 'checkbox',
            ...rowSelection,
          } : ""}
          pagination={{
            onChange: onShowSizeChange,
            showSizeChanger: true,
            position: "bottomRight",  //位置
            defaultCurrent: 1,   // 默认页数
            total: NewPage.total,  // 总条数
            showTotal: total => `总共 ${total} 条`, // 显示总条数
            pageSizeOptions: ['10', '20', '30', '40'],  // 设置每页条数
            hideOnSinglePage: !pageState,  // 只有一页时是否隐藏
            showQuickJumper: true,
          }}
          columns={columns}
          dataSource={data}
          bordered={true}
        />
      </div>
    );
  };



// ReactDOM.render(<Demo />, mountNode);